﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.validity.js"></script>
        <script type="text/javascript">
            function switchOutputs(){
                if($.validity.settings.outputMode == "Modal"){
                    $.validity.settings.outputMode = "Summary";
                    $('#SwitchLink').html('Change From Summary to Modal');
                }
                else{
                    $.validity.settings.outputMode = "Modal";
                    $('#SwitchLink').html('Change From Modal to Summary');
                }
                
                $('.validity-modal-msg').remove();
                $('#validity-summary-output').hide().html('');
                $('.validity-erroneous').removeClass('validity-erroneous');
            }
            function validatePassword(){
                $.validity.Clear();
                $("input[type='password']").AreEqual('Error: Passwords do not match.');
            }
        </script>
        
        <link rel="Stylesheet" type="text/css" href="jquery.validity.css" />
        <style type="text/css">
            body{font-family:Arial,Helvetica,Sans-Serif;padding:0;margin:0;background-color:#555;font-size:smaller;}
            #main{width:1000px;background-color:#bbb;padding:10px;margin: 20px;}
            #validity-summary-output{border:solid 1px #f56600;}
        </style>
        
        <title>jQuery.validity Demo</title>
    </head>
    <body>
        <div id='main'>
            <h1>jQuery.validity Demo</h1>
            <h2>Overview:</h2>
            <!--<p>
                <i>validity</i> is a flexible, platform-agnostic clientside validation framework implemented as a jQuery plugin.
                Instead of balancing a complex validation tool built into your web-framework to validate on both the client and 
                the server, why not do the clientside validation in a clientside language and the serverside validation in a 
                serverside language? Enter <i>validity</i>, a cross-browser clientside validation tool tailored to the nuances
                of a webpage's structure. 
            </p>
            <p>
                <i>validity</i> makes use of jQuery's selector engine to perform safe validation on groups of inputs based on 
                CSS selectors rather than on explicit elements. This means that <i>validity</i> is most effective in pages where 
                the inputs which are displayed, and the datatypes those inputs should accept are dynamic. Validation functions
                are also fairly declarative and English-like, making validation easy to write and debug. Additionally, 
                <i>validity</i> is agnostic of the web-framework being used. It is equally adept in ASP.NET, Rails, PHP and JSP 
                environments.
            </p>-->
            <h2>Output Mode:</h2>
            <p>
                <i>validity</i> has four 'Output Modes': 'Modal', 'Summary', 'None' and 'Custom'. You will select the output
                mode that is most appropriate for your application, or write your own with the custom output.
                Below, the error summary will appear if an error is encountered and the outputMethod is set to 'Summary'.
                [<a id="SwitchLink" href="#x" onclick="switchOutputs()">Change From Modal To Summary</a>]
            </p>
            <div id="validity-modal-output"></div>
            <div id="validity-summary-output"></div>
            <h2>Requiring Fields:</h2>
            <p>
                Below is a required field. For this demo, its id attribute is set to be 'req'. We validate it with the code:
            </p>
            <pre>
                $.validity.Clear();
                var valid = $('#req').Require('Error: A Name Is Required.');
                // The variable 'valid' now contains a boolean representing whether the input passed validation.
            </pre>
            <p>
                Enter Your Name:<input type="text" id='req' name='req' />
                <input type="button" value='Validate This Field!' onclick="$.validity.Clear();$('#req').Require('Error: A Name Is Required.');" />
            </p>
            <h2>Format Validation:</h2>
            <p>
                Fields can be validated to match a regular expression format using the Match method. The following input is 
                validated to only accept either an integer or nothing with the following code:
            </p>
            <pre>
                $.validity.Clear();
                var valid = $('#qty').Match('Error: Quantity Must Be Formatted as an Integer.', '^\\d*$');
            </pre>
            <p>
                Optional: Enter Quantity:<input type="text" id='qty' name='qty' />
                <input type="button" value='Validate This Field!' onclick="$.validity.Clear();$('#qty').Match('Quantity Must Be Formatted as an Integer.','^\\d*$');" />
            </p>
            <h2>Validation Regimens:</h2>
            <p>
                You may have noticed that the Format Validator always passes when no text is entered. In order to both require a value, 
                and validate its format, we have to use a Regimen Validator since those two tests are different operations (and we want
                to deliver a different error message for each). This particular regimen is already defined in <i>validity</i> and can be 
                performed with the RequireThenMatch method. The function will be called as is shown below.
            </p>
            <pre>
                $.validity.Clear();
                var valid = $('#reqqty').RequireThenMatch(
                    'Error: A Quantity Is Required.', 
                    'Error: Quantity Must Be Formatted as an Integer.', 
                    '^\\d*$');
            </pre>
            <p>
                Required: Enter Quantity: <input type="text" id="reqqty" name="reqqty" />
                <input type="button" value='Validate This Field!' onclick="$.validity.Clear();$('#reqqty').RequireThenMatch('Error: A Quantity Is Required.', 'Error: Quantity Must Be Formatted as an Integer.', '^\\d*$');" />
            </p>
            <h2>Equality:</h2>
            <p>
                Often, in account registration scenarios, we must check for the eqality of more than one input such as ensuring that a password
                matches its confirmation field. We can do this validation with a jQuery selector that returns all the fields which must be equal
                (in this case only two) and call the AreEqual method. Observe:
            </p>
            <pre>
                $.validity.Clear();
                var valid = $("input[type='password']").AreEqual('Error: Passwords do not match.');
            </pre>
            <p>
                Password:<input type="password" id="Pass" name="Pass" />Confirm Password:<input type="password" id="PassConf" name="PassConf" />
                <input type="button" value="Validate These Fields!" onclick="validatePassword();" />
            </p>
            <h2>Uniqueness:</h2>
            <p>
                The converse to the AreEqual method - where no two matched elements have different values - the AreNotEqual method will 
                validate that no two elements have the same value. This is useful in situations where repeat values are not allowed. (It
                should be noted that fields where no value is entered will be ignored.) We validate this in much the same way as the 
                AreEqual:
            </p>
            <pre>
                $.validity.clear();
                var valid = $('input.Name').AreNotEqual('Error: A name was repeated.');
            </pre>
            <p>
                Enter Names: 
                <input type="text" class="Name" />&nbsp;
                <input type="text" class="Name" />&nbsp;
                <input type="text" class="Name" />&nbsp;
                <input type="text" class="Name" />&nbsp;
                <input type="button" value="Validate These Fields!" onclick="$.validity.Clear();$('input.Name').AreNotEqual('Error: A name was repeated.');" />
            </p>
        </div>
    </body>
</html>
